<!--  -->
<template>
  <div :class="$style.bgBody">
    <div :class="$style.conTitle"></div>
    <button :class="$style.conBtn">进入系统</button>
    <div :class="$style.mainCont">
      <!-- 左边模块 -->
      <div :class="$style.leftCont">
        <!-- 左边第一个 -->
        <div :class="$style.leftTop">
          <div :class="$style.virtualShadow">
            <p>今日出勤</p>
          </div>
          <attendanceData></attendanceData>
        </div>
        <!-- 左边第二个 -->
        <div :class="$style.leftCenter">
          <div :class="$style.virtualShadow">
            <p>单位人员统计</p>
          </div>
          <PersonnelStatistics></PersonnelStatistics>
        </div>
      </div>

      <!-- 中间模块 -->
      <div :class="$style.centerCont">
        <div :class="$style.centerTop">
          888888
        </div>
        <!-- 防疫物资 -->
<!--        <div :class="$style.centerBottom">-->
<!--          <p>-->
<!--            14-->
<!--          </p>-->
<!--          <div>-->
<!--            15-->
<!--          </div>-->
<!--        </div>-->
      </div>

      <!-- 右边模块 -->
      <div :class="$style.rightCont">
        <div :class="$style.rightTop">
          <div :class="$style.virtualShadow">
            <p>现场工种</p>
          </div>
          <typeOfWord></typeOfWord>
        </div>
        <div :class="$style.rightCenter">
          <div :class="$style.virtualShadow">
            <p>年龄分布</p>
          </div>
          <ageDistribution></ageDistribution>
          <div>
          </div>
        </div>
<!--        <div :class="$style.rightBottom">-->
<!--          <p>-->
<!--            20-->
<!--          </p>-->
<!--          <div>-->
<!--            21-->
<!--          </div>-->
<!--        </div>-->
      </div>
    </div>
    <div :class="$style.bottomContent">
      <div :class="$style.bottomContentLeft">
        <div :class="$style.virtualShadow">
          <p>现场人员变化</p>
        </div>
        <PersonnelChanges></PersonnelChanges>
      </div>
      <div :class="$style.bottomContentRight">
        <div :class="$style.virtualShadow">
          <p>预警列表</p>
        </div>
        <ul style="display: -webkit-flex;display: flex;margin: 10px 0;text-align: center;">
          <li style="width: 30%;list-style: none;">检测项</li>
          <li style="width: 20%">安全帽编号</li>
          <li style="width: 20%">预警时间</li>
          <li style="width: 30%">状态</li>
        </ul>
        <vueSeamless :data="listData" style="height: 240px; overflow: hidden;">
          <ul style="margin: 0; list-style: none;">
            <li v-for="(item,index) in listData" :key="index" style="display: -webkit-flex; display: flex; height: 50px; vertical-align: middle; text-align: center;">
              <p style="width: 30%">{{item.testItems}}</p>
              <p style="width: 20%">{{item.securityName}}</p>
              <p style="width: 20%">{{item.warningTime}}</p>
              <p style="width: 30%">{{item.state}}</p>
            </li>
          </ul>
        </vueSeamless>
      </div>
    </div>
  </div>
</template>

<script>
  import attendanceData from './cards/AttendanceData'
  import typeOfWord from './cards/typeOfWord'
  import PersonnelStatistics from './cards/PersonnelStatistics'
  import ageDistribution from './cards/ageDistribution'
  import PersonnelChanges from './cards/PersonnelChanges'
  import vueSeamless from 'vue-seamless-scroll'
  export default {
    components: {
      attendanceData,
      typeOfWord,
      PersonnelStatistics,
      ageDistribution,
      PersonnelChanges,
      vueSeamless
    },
    data () {
      return {
        // listData: [
        //   {
        //     testItems: '撞击预警',
        //     securityName: 'zjyj001',
        //     warningTime: '2020-4-27',
        //     state: '黄色预警'
        //   },
        //   {
        //     testItems: '滞留预警',
        //     securityName: 'zlyj001',
        //     warningTime: '2020-4-27',
        //     state: '蓝色预警'
        //   },
        //   {
        //     testItems: '脱帽预警',
        //     securityName: 'tmyj001',
        //     warningTime: '2020-4-27',
        //     state: '蓝色预警'
        //   },
        //   {
        //     testItems: '超界预警',
        //     securityName: 'cjyj001',
        //     warningTime: '2020-4-27',
        //     state: '蓝色预警'
        //   },
        //   {
        //     testItems: '滞留预警',
        //     securityName: 'zlyj001',
        //     warningTime: '2020-4-27',
        //     state: '蓝色预警'
        //   },
        //   {
        //     testItems: '超界预警',
        //     securityName: 'cjyj001',
        //     warningTime: '2020-4-27',
        //     state: '蓝色预警'
        //   },
        //   {
        //     testItems: '滞留预警',
        //     securityName: 'zlyj001',
        //     warningTime: '2020-4-27',
        //     state: '蓝色预警'
        //   }
        // ]
      }
    },
    computed: {
      listData () {
        return [
          {
            testItems: '撞击预警',
            securityName: 'zjyj001',
            warningTime: '2020-4-27',
            state: '黄色预警'
          },
          {
            testItems: '滞留预警',
            securityName: 'zlyj001',
            warningTime: '2020-4-27',
            state: '蓝色预警'
          },
          {
            testItems: '脱帽预警',
            securityName: 'tmyj001',
            warningTime: '2020-4-27',
            state: '蓝色预警'
          },
          {
            testItems: '超界预警',
            securityName: 'cjyj001',
            warningTime: '2020-4-27',
            state: '蓝色预警'
          },
          {
            testItems: '滞留预警',
            securityName: 'zlyj001',
            warningTime: '2020-4-27',
            state: '蓝色预警'
          },
          {
            testItems: '超界预警',
            securityName: 'cjyj001',
            warningTime: '2020-4-27',
            state: '蓝色预警'
          },
          {
            testItems: '滞留预警',
            securityName: 'zlyj001',
            warningTime: '2020-4-27',
            state: '蓝色预警'
          }
        ]
      }
    }
  }
</script>
<style lang='scss' module>
  .blueGreen{color: rgb(51,223,249);}
  .bigYellow{color:rgb(255,213,3)}
  .doc-vld-select {
    width: 110px;
    height: 40px;
    color: #ebebeb;
    border:1px solid #00409e;
    background-color: rgba(0,85,255,.1);
    border-radius: 3px;
    border: 1px solid #9194a7;
    text-indent: 10px;
    line-height: 40px;
    font-size: 16px;
  }
  .bgBody{
    width:100%;
    height:100%;
    background:rgba(0,11,43,1);
    opacity:1;
    background-size: cover;
    background-repeat: no-repeat;
    .conTitle{
      height: 90px;
      color: #fff;
      background-size: contain;
      background-repeat: no-repeat;
    }
    .conBtn{
      // display: block;
      position: absolute;
      top:20px;
      right: 20px;
      width:106px;
      height:32px;
      background:rgba(49,132,255,1);
      border-radius:1px;
      border:1px solid rgba(49,132,255,1);
      color:#fff;
      cursor: pointer;
      &>img{
        margin-right: 5px;
      }
      // line-height: 32px;
    }
    .mainCont{
      display: -webkit-flex;
      display: flex;
      width: 98%;
      // height: 1000px;
      margin: -40px auto 0 auto;
      color: #fff;
      padding:20px 0;
      .leftCont{
        width: 30%;
        &>div{
          width: 100%;
          // margin: 0 auto;
          border:1px solid #00409e;
          background-color: rgba(33,113,208,.1);
        }
        .leftTop{
          width:413px;
          height:280px;
          background:rgba(0,203,210,0.1);
          border:2px solid rgba(1,156,202,1);
          opacity:1;
          border-radius:4px;
        }
        .leftCenter{
          margin-top: 30px;
          width:413px;
          height:289px;
          background:rgba(0,203,210,0.1);
          border:2px solid rgba(1,156,202,1);
          opacity:1;
          border-radius:4px;
        }
      }
      .centerCont{
        width:678px;
        height:600px;
        margin: 0 30px;
        // background-color: rgb(223, 186, 186);
        .centerTop{
          width:100%;
          height:600px;
          background: #cccccc;
          display: -webkit-flex;
          display: flex;
          -webkit-justify-content:space-around;
          justify-content: space-around;
          color:#CCE6FF;
        }
        .centerBottom{
          /*height: 275px;*/
          /*margin: 20px auto;*/
          /*border:1px solid #00409e;*/
          /*background-color: rgba(33,113,208,.1);*/
        }
      }
      .rightCont{
        width: 32%;
        // background-color: rgb(223, 186, 186);
        &>div{
          margin: 0 auto;
          border:1px solid #00409e;
          background-color: rgba(33,113,208,.1);
        }
        .rightTop{
          width:410px;
          height:280px;
          background:rgba(0,203,210,0.1);
          border:2px solid rgba(1,156,202,1);
          opacity:1;
          border-radius:4px;
        }
        .rightCenter{
          margin-top: 30px;
          width:410px;
          height:289px;
          background:rgba(0,203,210,0.1);
          border:2px solid rgba(1,156,202,1);
          opacity:1;
          border-radius:4px;
        }
      }
    }
    .bottomContent{
      display: -webkit-flex;
      display: flex;
      width: 98%;
      margin: 20px auto 0 auto;
      color: #fff;
      padding:20px 0;
      .bottomContentLeft {
        width:45%;
        height:304px;
        border:2px solid rgba(1,156,202,1);
        opacity:1;
        border-radius:4px;
      }
      .bottomContentRight {
        width:45%;
        margin-left: 8.7%;
        height:304px;
        border:2px solid rgba(1,156,202,1);
        opacity:1;
        border-radius:4px;
      }
    }
  }
  .virtualShadow{
    width: 340px;
    height: 26px;
    margin: 21px 0 0 27px;
    display: -webkit-flex;
    display: flex;
    background-image: url('../../../public/imgs/daping1.png');
    background-repeat: no-repeat;
    &>p{
      height: 26px;
      line-height: 26px;
      padding-left: 20px;
    }
  }
  .anchorBL{
    display:none;
  }
  .mapSchool{
    /*width:678px;*/
    /*height:548px;*/
    /*background:rgba(0,203,210,1);*/
    /*border:3px solid rgba(1,156,202,1);*/
    /*opacity:1;*/
    /*border-radius:4px;*/
  }
  .bm-view{
    flex:1 1 auto;
  }
  .bm-view > div {
    width: 100%;
    height: 550px;
  }
  .serachinput {
    width: 300px;
    box-sizing: border-box;
    padding: 9px;
    border: 1px solid #dddee1;
    line-height: 20px;
    font-size: 16px;
    height: 38px;
    color: #333;
    position: relative;
    border-radius: 4px;
    -webkit-box-shadow: #666 0px 0px 10px;
    -moz-box-shadow: #666 0px 0px 10px;
    box-shadow: #666 0px 0px 10px;
  }
  .map-info-window-content{
    width: 220px;
    height: 150px;
    line-height: 35px;
    color:#fff;
    &>div{
      width: 200px;
      padding-left: 8px;
    }
    &>div:first-child,&>div:nth-child(2){
      color: #00F6FF;
    }
    &>div:first-child{
      margin-top: -8px;
      padding-left: 0px;
    }
    &>div:nth-child(2){
      margin-top: 5px;
    }
    &>div:nth-child(4){
      border-top:1px dashed #3B74BB;
      border-bottom:1px dashed #3B74BB;
      color: #ED3A4F;
    }
    &>div:nth-child(5){
      color:#8EA4AF;
    }
  }
  .map-mark-label{
    background: #bc271c;
  }
  .sample {
    width: 220px;
    height: 150px;
    line-height: 35px;
    background-color: #011E61;
    border:1px solid #3980D1;
    box-shadow: 0 0 5px #000;
    overflow: hidden;
    color: #fff;
    padding-left: 10px;
    position: absolute;
    &>div:first-child{
      display: -webkit-flex;
      display: flex;
      &>div:first-child{
        width: 90%;
        padding-top:8px;
        color: #00F6FF;
      }
    }
    &>div:last-child{
      width: 80%;
      &>div+div{
        border-top:1px dashed #3B74BB;
      }
      &>div{
        padding-left: 7px;
        &:first-child{
          color: #00F6FF;
        }
        &:nth-child(3){
          color: #ED3A4F;
        }
        &:nth-child(4){
          color:#8EA4AF;
        }
      }
    }
  }
</style>
<style>
  .BMap_cpyCtrl{
    display:none;
  }
  .anchorBL{
    display:none;
  }
  .BMap_pop .BMap_top{
    border-color: #3B74BB !important;
  }
  .BMap_pop .BMap_center{
    border-color: #3B74BB !important;
  }
  .BMap_pop .BMap_bottom{
    border-color: #3B74BB !important;
  }
  .BMap_pop>div>div{
    border-color: #3B74BB !important;
  }
  .BMap_pop div{
    background-color: #011E61 !important;
  }
  .BMap_pop>div:nth-child(8){
    display: none;
  }
  /*地图标题*/
  .BMap_bubble_title{
    font-size:13px;
    font-weight: bold;
    text-align:left;
  }
  .BMap_pop div:nth-child(3){
    border-radius:0 2px 0 0;
    width:23px;
    width:0px;
    height:0px;
  }
  .BMap_pop div:nth-child(3) div{
    border-radius:2px;
  }
  .BMap_pop div:nth-child(5){
    border-radius:0 0 0 2px;
  }
  .BMap_pop div:nth-child(5) div{
    border-radius:2px;
  }
  .BMap_pop div:nth-child(7){
    border-radius:0 0 2px 0 ;
  }
</style>
